import {Box} from "@mui/material";
import DGChangeTheme from "../../../components/DGChangeTheme.tsx";
import DGListViewItem from "../../../components/DGListViewItem.tsx";
import {AccountCircle} from "@mui/icons-material";
import {useLocation, useNavigate} from "react-router-dom";
// import ManageHistorySharpIcon from "@mui/icons-material/ManageHistorySharp";
import PaidSharpIcon from "@mui/icons-material/PaidSharp";
import FeedSharpIcon from "@mui/icons-material/FeedSharp";
// import PostAddSharpIcon from "@mui/icons-material/PostAddSharp";
import HandshakeSharpIcon from "@mui/icons-material/HandshakeSharp";
import PrivacyTipSharpIcon from "@mui/icons-material/PrivacyTipSharp";
import InfoSharpIcon from "@mui/icons-material/InfoSharp";
import SecurityIcon from '@mui/icons-material/Security';
import {FC, useEffect, useState} from "react";
import DGListView from "../../../components/DGListView.tsx";

interface HomeAppMenuProps {
    close?: () => void;
}

const HomeMenu: FC<HomeAppMenuProps> = ({close}) => {
    // 路由跳转
    const router = useNavigate();
    // 获取路由
    const location = useLocation().pathname;
    // 选中的菜单
    const [selectedIndex, setSelectedIndex] = useState(location.split("/")[1]);

    // 点击事件
    const handleClick = (path: string) => {
        if (path.split("/")[1] === selectedIndex) return;
        setSelectedIndex(path);
        if (close) close();
        setTimeout(() => router(path, {replace: true}), 1);
    }

    // 获取访问路径并更选中组件
    useEffect(() => {
        setSelectedIndex(location.split("/")[1])
    }, [location]);

    return (<Box style={{display: "flex", flexDirection: "column", gap: "15px"}}>

        {/* 切换主题模式 */}
        <Box style={{marginTop: "10px"}}><DGChangeTheme NoBackground/></Box>

        {/*<DGListView NoBackground>*/}
        {/*    /!* 逐梦园 *!/*/}
        {/*    <DGListViewItem*/}
        {/*        icon={<Home/>} title="逐梦园" selected={selectedIndex === "index" || selectedIndex === ""}*/}
        {/*        onClick={() => handleClick("/index")}/>*/}
        {/*</DGListView>*/}

        <DGListView NoBackground>
            {/* 我的账号 */}
            <DGListViewItem
                icon={<AccountCircle/>} title="我的账号" selected={selectedIndex === "account" || selectedIndex === ""}
                onClick={() => handleClick("/account")}/>
            {/* 我的钱包 */}
            <DGListViewItem
                icon={<PaidSharpIcon/>} title="我的钱包" selected={selectedIndex === "money"}
                onClick={() => handleClick("/money")}/>
            {/* 安全中心 */}
            <DGListViewItem
                icon={<SecurityIcon/>} title="安全中心" selected={selectedIndex === "security"}
                onClick={() => handleClick("/security")}/>
        </DGListView>


        <DGListView NoBackground>
            {/* 意见反馈 */}
            <DGListViewItem
                icon={<FeedSharpIcon/>} title="意见反馈"
                selected={selectedIndex === "feedback"}
                onClick={() => handleClick("/feedback")}/>
            {/* 责任声明 */}
            <DGListViewItem
                icon={<HandshakeSharpIcon/>} title="用户协议" selected={selectedIndex === "agree1"}
                onClick={() => handleClick("/agree1")}/>
            {/* 隐私政策 */}
            <DGListViewItem
                icon={<PrivacyTipSharpIcon/>} title="隐私政策" selected={selectedIndex === "agree2"}
                onClick={() => handleClick("/agree2")}/>
            {/* 关于我们 */}
            <DGListViewItem
                icon={<InfoSharpIcon/>} title="关于我们" selected={selectedIndex === "about"}
                onClick={() => handleClick("/about")}/>
        </DGListView>
    </Box>);
}
export default HomeMenu;